{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<br>

<form class="layui-form" action="" id="cross_srh">
    <div class="proxy_srh">
        <div class="layui-inline">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <label class="layui-form-label">project_name：</label>
                    <div class="layui-input-inline">
                        <select class="layui-select" name="project_name" id="project_name" lay-verify="" lay-search
                                lay-filter="project_name">

                            {% for d in projectAll %}
                                <option value={{d.id}}>{{d.project_name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="layui-input-inline">
                    <label class="layui-form-label">module_name：</label>
                    <div class="layui-input-inline" id="module_div">
                       <select class="layui-select" name="module_name" id="module_name" lay-verify="" lay-search
                                lay-filter="module_name">
                           <option value="">请选择</option>

                        </select>
                    </div>
                </div>
                <br><br>
                <div class="layui-input-inline">
                    <label class="layui-form-label">plan：</label>
                    <div class="layui-input-inline">
                       <select class="layui-select" name="api_plan_id" id="api_plan_id" lay-verify="" lay-search
                                lay-filter="api_plan_id">
                           <option value="">请选择</option>
                            <option value="1">实时执行任务</option>
                        </select>
                    </div>
                </div>
                <div class="layui-input-inline">
                    <label class="layui-form-label">result：</label>
                    <div class="layui-input-inline">
                       <select class="layui-select" name="result" id="result" lay-verify="" lay-search
                                lay-filter="api_plan_id">
                           <option value="">请选择</option>
                            <option value="1">True</option>
                           <option value="0">False</option>
                        </select>
                    </div>
                </div>
                <div class="layui-input-inline">
                    <label class="layui-form-label">path：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="path" id="path" placeholder="请输入" style="width:212px">
                    </div>
                </div>

                <div class="layui-inline" style="left: 257px">
                    <button class="layui-btn" type="button" id="start" lay-submit lay-filter="start">查询</button>
                </div>
            </div>
        </div>

    </div>
</form>
<hr class="layui-bg-gray">

<script type="text/html" id="filemange_v1">
    <button type="button"  class="layui-btn layui-btn-xs layui-btn-danger" lay-event="update">响应时间变化</button>
</script>

<table class="layui-hide" id="apiCase" lay-filter="apiCase"></table>

<script>
    layui.use(['table','code'], function(){
          var table = layui.table
          ,form = layui.form;
          var $= layui.jquery;
          var loading = layer.load();

          var  options = {
                elem:'#apiCase',
                skin:"line",
                page:true,
                height: 'full-200',
                toolbar: true,
                url:'/case/api/result/srh?',
                limit:10,
                limits:[10,20,30],
                where:{
                    project_id : $('#project_name option:selected').val(),
                    module_id: $('#module_name option:selected').val(),
                    api_plan_id: $('#api_plan_id option:selected').val(),
                    api_result: $('#result option:selected').val(),
                    path: $('#path').val()
                },
                response:{
                    statusName:'errorCode',
                    statusCode:'',
                    dataName:'data'
                },
                cols:[[
                       {type: 'numbers'}
                      ,{field: 'path', title: 'path',sort:true}
                      ,{field: 'api_result', title: 'api_result',sort:true,templet: function(d){
                            if(d.api_result==1){
                                return '<span style="color:green">True</span>'
                            }else{
                                return '<span style="color:red">False</span>'
                            }
                      }}
                      ,{field: 'responseJsonTime', title: 'time',sort:true}
                      ,{field: 'responseJson', title: 'responseJson',sort:true,width:1}
                      ,{field: 'last_time', title: 'last_time',sort:true}
                      ,{fixed: 'right', title:'', toolbar: '#filemange_v1',width:170}

                ]],
                id:'apiCase',
                done:function(res,cur,count){
                    $("[data-field='responseJson']").css('display','none');

                    layer.close(loading);
                }
              };
          var tableIns = table.render(options);

          form.on('select(project_name)', function(obj){
                $.ajax({
                         //发出请求
                        type:"GET",
                        url:"/moudle/all/select?",
                        contentType: 'application/json; charset=utf-8',
                        dataType:"json",
                        data:{"project_id":obj.value,"moudle_type":"1"},
                        success: function(result){
                            s1 = '<div class="layui-input-inline"> <select class="layui-select" name="module_name" id="module_name" lay-verify="" lay-search lay-filter="module_name"><option value="">请选择</option>';
                            e1 = '</select></div>';
                             if(result.data.length>0){

                                str = '';
                                layui.each(result.data,function(k,v){
                                        str = str+'<option value="'+v.id+'">'+v.moudle_name+'</option>'
                                });
                                htmlDiv = s1+str+e1;
                                $("#module_div").html(htmlDiv);


                             }else{
                                $("#module_div").html(s1+e1);
                             }
                             form.render();


                       }
                    });
                  form.render('select');
          });

          table.on('row(apiCase)', function(obj){
                obj.tr.css("background","#eeeeee");
          });
          table.on('rowDouble(apiCase)', function(obj){

            if($(".layui-layer-close").length == 0 ){
                        divRunContent = '<div class="layui-inline"><pre id="json"></pre></div>';
                        index = layer.open({
                                    type:1,
                                    skin: 'demo-class',
                                    content:divRunContent,
                                    area:['666px','346px'],
                                    offset:  'lb',
                                    title:obj.data.path + "——运行",
                                    closeBtn:1,
                                    shade: 0,
                                    id:"runApiCase",
                                    shadeClose:true,
                                    maxmin: true,
                                    success: function(index, layero){

                                    }
                        });
            }
            $('#json').jsonViewer(obj.data.responseJson);


          });


          //更新或者删除案例
          table.on('tool(apiCase)', function(obj){
                if(obj.event === 'update'){
                    layui.data('test', {key: 'path',value: obj.data.path});
                    index=layer.open({
                                                type:2,
                                                content:"/api/case/result/history/index",
                                                area:['1055px','473px'],
                                                //offset: ['231px','307px'],
                                                title:obj.data.path+"_响应历史变化",
                                                closeBtn:1,
                                                shade: 0,
                                                shadeClose:true,
                                                maxmin: true,
                                                cancel: function(index, layero){
                                                     $('#start').click();
                                                }
                    });


                }
          });

          //点击查询
          $('#start').on('click',function(){
              var loading = layer.load();

              options = {
                elem:'#apiCase',
                skin:"line",
                page:true,
                height: 'full-200',
                toolbar: true,
                url:'/case/api/result/srh?',
                limit:10,
                limits:[10,20,30],
                where:{
                    project_id : $('#project_name option:selected').val(),
                    module_id: $('#module_name option:selected').val(),
                    api_plan_id: $('#api_plan_id option:selected').val(),
                    api_result: $('#result option:selected').val(),
                    path: $('#path').val()
                }
              }
              tableIns.reload(options);
              layer.close(loading);
          });




          form.render();
          layer.close(loading);

    });
</script>
{% endblock %}